<template>
  <div class="header" id="nav-bar">
    <div class="main">
      <div class="m_left">
        <div class="m_le_img"></div>
      </div>
      <div class="m_right">
        <ul class="center_nav" :class="{ yincang: showNav === false }">
          <li
            class="w-1-6"
            v-for="(item, index) in routeList"
            :key="index"
            :class="{ active: item.name === active }"
            :data-menuanchor="item.path"
            @click="navClick(item)"
          >

           <!-- 为了点击后路径不变  后续页面全开发完成后 在使用 -->
            <!-- <a :href="'#' + item.path">
              {{ item.name }}
            </a> -->

             <a :href="'#'">
              {{ item.name }}
            </a>

          </li>
        </ul>
        <div class="m_menu">
          <div
            class="m_m_img"
            @click="navBtnClick"
            :class="{ rotate: showNav === false }"
          ></div>
          <div class="m_m_name">Menu</div>
        </div>
      </div>
      <!-- @click="changeTab(item)" -->
      <!-- :data-menuanchor="item.path" -->
      <!-- <a :href="'#'+item.path"> -->
    </div>
  </div>
</template>
<script>
export default {
  props: ['chuang'],
  data() {
    return {
      windowWidth: document.documentElement.clientWidth,
      showNav: true,
      active: this.chuang,
      routeList: [
        {
          name: '首页',
          path: 'index'
        },

        {
          name: '产品与服务',
          path: 'prod'
        },
        {
          name: '解决方案',
          path: 'plan'
        },
        {
          name: '案例',
          path: 'ex'
        },
        {
          name: '关于我们',
          path: 'abt'
        },
        {
          name: '新闻中心',
          path: 'news'
        }
      ]
    };
  },
  watch: {
    windowWidth(val) {
      // let that = this;
      console.log('实时屏幕宽度：', val);
    }
  },
  created() {},
  mounted() {
    var that = this;
    // <!--把window.onresize事件挂在到mounted函数上-->
    window.onresize = () => {
      return (() => {
        // window.fullHeight = document.documentElement.clientHeight;
        window.fullWidth = document.documentElement.clientWidth;
        // that.windowHeight = window.fullHeight; // 高
        that.windowWidth = window.fullWidth; // 宽
        if (that.windowWidth < 800) {
          that.showNav = false;
        } else {
          that.showNav = true;
        }
      })();
    };
  },
  computed: {},
  methods: {
    changeTab(item) {
      this.active = item.name;
      // this.$router.push({ path: '#'+item.path });
    },
    // nav跳转详情页
    navClick(item) {
      console.log(item.name + '被点击了');
      // this.active = item.name;
      if (item.path == 'index' || item.path == 'abt') {
        this.$router.replace('/' + item.path);
      } else {
         this.$message.error('部分功能正在更新维护中')
      }
    },
    navBtnClick() {
      this.showNav = !this.showNav;
    }
  }
};
</script>
<style lang="less" scoped>
// 导航栏隐藏
.header {
  width: 100%;
  height: 1rem;
  position: fixed;
  z-index: 999;
  transition: 0.6s;
  .main {
    width: 100%;
    height: 100%;
    background: #151b21;
    display: flex;
    .m_left {
      width: 50%;
      height: 100%;
      .m_le_img {
        background: url('../../assets/images/logo.png') no-repeat center;
        background-size: 100%;
        width: 2rem;
        height: 0.48rem;
        margin: 0.25rem 1rem;
      }
    }
    .m_right {
      width: 49%;
      height: 100%;
      display: flex;
      .yincang {
        position: relative;
        left: 72%;
        opacity: 0;
      }
      ul {
        height: 1rem;
        padding: 0;
        width: 85%;
        margin: 0 auto;
        position: relative;
        left: 0%;
        transition: 1s;

        li {
          float: left;
          list-style: none;
          text-align: center;
          line-height: 1rem;
          font-size: 0.18rem;
          font-family: PingFang SC;
          font-weight: 200;
          color: #ffffff;

          a {
            text-decoration: none;
            color: #ffffff;
          }
        }
        li:hover {
          font-size: 0.22rem;
          font-family: PingFang SC;
          font-weight: bold;
          color: #ffffff;
        }
        .active {
          font-size: 0.22rem;
          font-family: PingFang SC;
          font-weight: bold;
          color: #ffffff;
        }
      }
      .m_menu {
        width: 12%;
        height: 100%;
        display: flex;
        line-height: 1rem;
        position: relative;
        z-index: 10;
        .m_m_img {
          background: url('../../assets/images/menu.png') no-repeat center;
          background-size: 100%;
          width: 0.25rem;
          height: 0.23rem;
          margin: 0.4rem 0.1rem;
          transition: 1s;
          cursor: pointer;
        }
        .rotate {
          transform: rotate(90deg);
        }
        .m_m_name {
          font-size: 0.18rem;
          font-family: PingFang SC;
          font-weight: bold;
          color: #ffffff;
        }
      }
    }
  }
}
@media screen and (max-width: 775px) {
  .header .main .m_right {
    width: 69%;
  }
  .header .main .m_left {
    width: 30%;
  }
}




</style>
